<template>
    <rx-dialog @handOk="handleSubmit" @cancel="cancel" class="ChartDataModelDesign">
        <div class="report">
            <div class="add">
                <a-form-model labelAlign="left" ref="form" layout="inline" :model="mdl" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
                    <a-form-model-item :label="i18n('form.modelName','模型名称')" prop="name">
                        <a-input :placeholder="i18n('form.modelName','模型名称','input')" v-model="mdl.name"/>
                    </a-form-model-item>
                    <a-form-model-item :label="i18n('form.classify','分类')" prop="categoryId">
                        <rx-category-select v-if="isShowManageTree" :isAdmin="isManageToTree" cat-key="FORM" :isGrant="true" v-model="mdl.categoryId"></rx-category-select>
                    </a-form-model-item>
                    <a-form-model-item  :label="i18n('form.dataSource','数据源')" prop="dataSource">
                        <rx-input-button v-model="mdl.dataSource" style="width: 100%;" class="input-button-edit"
                                         @click="openDataSource"></rx-input-button>
                    </a-form-model-item>
                    <a-form-model-item  :label="i18n('form.mode','模式')">
                        <a-radio-group v-model="dataModeType" @change="typeChange" >
                            <a-radio value="table">{{i18n('list.tableConfig','表配置')}}</a-radio>
                            <a-radio value="sql">{{i18n('list.customSQL','自定义SQL')}}</a-radio>
                        </a-radio-group>
                    </a-form-model-item>
                    <a-form-model-item  :label="i18n('form.identify','标识')" v-if="mdl.type=='sql'">
                        <a-input :placeholder="i18n('form.sqlIdentity','SQL标识','input')" v-model="sqlAlias"  @blur="sqlAliasBlur(sqlAlias)"/>
                    </a-form-model-item>
                    <a-form-model-item  :label="i18n('list.table','表')" v-if="mdl.type=='table'">
                        <a-input v-model="search" :placeholder="i18n('enterQuery','输入关键字查询')" @change="fuzzySearch"/>
                    </a-form-model-item>
                </a-form-model>
                <div v-if="mdl.type=='table'">
                    <draggable  v-model="searchTables" animation="300" dragClass="dragClass"  ghostClass="ghostClass" chosenClass="chosenClass"
                                @end="onEnd" :move="tableMove"  :options="{group:{name: 'site',pull:'clone'},sort: false}">
                        <transition-group>
                            <div class="drag" v-for="item in searchTables" :key="item.key" :title="item.key"><i class="iconfont iconcreatetask_fill iconform"></i>{{item.title}}</div>
                        </transition-group>
                    </draggable>
                </div>
            </div>
            <div>
                <div v-if="mdl.type=='table'">
                    <div class="tables_obj">
                        {{i18n('list.tableConfig','表配置')}}
                    </div>
                    <div >
                        <draggable style="height:200px;overflow:auto;" v-model="tables" group="site" animation="200" :move="onMove" @add="addTable">
                            <div class="neiConfigure" >
                                <div style="overflow:hidden;float: left">
                                    <div class="configureALI"
                                         @mouseenter="parentMouseenter(testlist.key)"
                                         @mouseleave="parentMouseleave('null')" v-if="testlist.title">
                                        {{ testlist.title }}
                                        <div class="deleteTbp" @click="wholeDelete" v-if="deleteParent ==testlist.key">
                                            <i class="iconfont iconempty"></i>
                                        </div>
                                    </div>
                                    <i v-if="testlist.children && testlist.children.length!=0" class="line"></i>
                                </div>
                                <div style="overflow: hidden">
                                    <ChartDataConfigure v-on:deleteClick="deleteClick" v-on:modification="modification" v-if="testlist.children" :children="testlist.children"/>
                                </div>
                            </div>
                        </draggable>
                    </div>
                </div>
                <div v-else>
                    <div class="tables_obj">

                        <span>{{i18n('list.customSQL','自定义SQL')}}</span>
                        {{i18n('list.sqlType','SQL类型')}}
                        <span style="padding-left:10px">

							<a-radio-group v-model="sqlType"  >
								<a-radio value="sql">sql</a-radio>
								<a-radio value="groovy">groovySql</a-radio>
							</a-radio-group>
						</span>
                    </div>
                    <div v-if="sqlAlias!=''">
                        <rx-monaco-editor v-if="sqlType=='sql'"
                                          ref="sql"
                                          v-model="sql"
                                          language="sql"
                                          style="height: 300px;margin-top: 8px;"
                        >
                            <template v-slot:monacoeditor>
								<span style="padding-left: 5px">
									<a-button icon="right-circle" @click="executeSql">{{i18n('list.executeSQL','执行SQL')}}</a-button>
								</span>
                                <span style="padding-left: 5px">
									<rx-constant-field @select="insertSql"></rx-constant-field>
								</span>
                            </template>
                        </rx-monaco-editor>
                        <rx-monaco-editor v-if="sqlType=='groovy'"
                                          ref="groovySql"
                                          v-model="sql"
                                          language="java"
                                          style="height: 300px;margin-top: 8px;"
                        >
                            <template v-slot:monacoeditor>
								<span style="padding-left: 5px">
									<a-button icon="right-circle" @click="executeSql">{{i18n('list.executeSQL','执行SQL')}}</a-button>
								</span>
                                <span style="padding-left: 5px">
									<a-button icon="edit" @click="showScriptDialog()">
										{{i18n('list.quickScript','快速脚本')}}
									</a-button>
								</span>
                                <span style="padding-left: 5px">
									<rx-constant-field @select="groovySql"></rx-constant-field>
								</span>
                            </template>
                        </rx-monaco-editor>
                    </div>

                    <div v-else  style="height: 300px;margin-top: 8px;">
                        <span>
                            {{i18n('sqlFirst','请先填写SQL标识!')}}
                        </span>
                    </div>
                </div>
                <div class="tables_obj" style="margin-top: 15px">
                    <span style="flex: 1">{{i18n('list.modelSet','数据模型设置')}}</span>
                    <span><a @click="syncTable">{{i18n('list.syncTable','同步表结构')}}</a></span>
                </div>
                <div class="model">
                    <div class="model_chart"><span style="flex: 1">{{i18n('list.dimension','维度')}}</span><a style="margin-right: 10px" @click="unhideAll('dimension')">{{i18n('list.unHideAll','全部取消隐藏')}}</a></div><div class="model_chart"><span style="flex: 1">{{i18n('list.measure','度量')}} </span><a style="margin-right: 10px" @click="unhideAll('measure')">{{i18n('list.unHideAll','全部取消隐藏')}}</a></div><div>{{i18n('list.param','参数')}}</div>
                </div>
                <div class="model_content modeboder">
                    <div >
                        <a-collapse  :bordered="false" default-active-key="1"  v-for="(dimension,index) in dimensions">
                            <template #expandIcon="props">
                                <a-icon type="caret-right" :rotate="props.isActive ? 90 : 0" />
                            </template>
                            <a-collapse-panel key="1" :header="dimension.tableName">
                                <div style="margin-top: -10px">
                                    <div class="model_obj" v-for="(field,index1) in dimension.fields" :key="field.fieldName">
                                        <i @mouseenter="mouseenter(index,index1,'dimension')" :class="['iconfont '+field.icon,field.hide?'model_decoration':'']" style="color:#02c5b7;margin-right: 6px"></i><span style="font-size: 12px;" :class="{'model_decoration':field.hide}" @mouseenter="mouseenter(index,index1,'dimension')">{{ field.fieldLabel }}</span>
                                        <a-dropdown :trigger="['click']" v-show="parentid==index && childrenid==index1">
                                            <i class="iconfont iconzhuanhuan icon_ringht" ></i>
                                            <a-menu slot="overlay" :selectedKeys="selectedKeys(field.dataFormat)" class="fonz12" v-show="parentid==index && childrenid==index1">
                                                <a-menu-item key="switchTo">
                                                    <span @click="switchTo(index,index1,'measure')" class="fonz12">{{i18n('list.switchMetric','切换为度量')}}</span>
                                                </a-menu-item>
                                                <a-menu-item key="addParam">
                                                    <span @click="addParam(index,index1,'dimension')" class="fonz12">{{i18n('list.addParam','添加到参数')}}</span>
                                                </a-menu-item>
                                                <a-sub-menu  v-show="field.dataType=='date'" class="fonz12" key="dataFormat" :title="i18n('list.dataFormat','数据格式')" @click="setDataFormat($event,index,index1)">
                                                    <a-menu-item key="YYYY-MM-DD">YYYY-MM-DD</a-menu-item>
                                                    <a-menu-item key="YYYY-MM-DD HH:mm:00">YYYY-MM-DD HH:mm:00</a-menu-item>
                                                    <a-menu-item key="YYYY-MM-DD HH:mm">YYYY-MM-DD HH:mm</a-menu-item>
                                                    <a-menu-item key="YYYY-MM-DD HH:mm:ss">YYYY-MM-DD HH:mm:ss</a-menu-item>
                                                </a-sub-menu>
                                                <a-menu-item key="hideField">
                                                    <span v-if="field.hide" @click="hideField(index,index1,'dimension',false)" class="fonz12">{{i18n('list.unhide','取消隐藏')}}</span>
                                                    <span v-else @click="hideField(index,index1,'dimension',true)" class="fonz12">{{i18n('list.hideField','隐藏字段')}}</span>
                                                </a-menu-item>
                                            </a-menu>
                                        </a-dropdown>
                                    </div>
                                </div>
                            </a-collapse-panel>
                        </a-collapse>
                    </div>
                    <div >
                        <a-collapse  :bordered="false" default-active-key="1"  v-for="(measure,index) in measures">
                            <template #expandIcon="props">
                                <a-icon type="caret-right" :rotate="props.isActive ? 90 : 0" />
                            </template>
                            <a-collapse-panel key="1" :header="measure.tableName">
                                <div style="margin-top: -10px">
                                    <div class="model_obj" v-for="(field,index1) in measure.fields" :key="field.fieldName">
                                        <i @mouseenter="mouseenter(index,index1,'measure')" :class="['iconfont '+field.icon,field.hide?'model_decoration':'']" style="color:#9babed;margin-right: 6px"></i><span style="font-size: 12px;" :class="{'model_decoration':field.hide}" @mouseenter="mouseenter(index,index1,'measure')">{{ field.fieldLabel }}</span>
                                        <a-dropdown :trigger="['click']" v-show="MRparentid==index && MRchildrenid==index1">
                                            <i class="iconfont iconzhuanhuan icon_ringht" ></i>
                                            <a-menu slot="overlay" :selectedKeys="selectedKeys(field.aggregate)" class="fonz12" v-show="MRparentid==index && MRchildrenid==index1">
                                                <a-menu-item key="switchTo">
                                                    <span @click="switchTo(index,index1,'dimension')" class="fonz12">{{i18n('list.toDimension','切换为维度')}}</span>
                                                </a-menu-item>
                                                <a-menu-item key="addParam">
                                                    <span @click="addParam(index,index1,'measure')" class="fonz12">{{i18n('list.addParam','添加到参数')}}</span>
                                                </a-menu-item>
                                                <a-sub-menu key="aggregate" class="fonz12" :title="i18n('list.polymerize','聚合') + '('+field.aggregate+')'" @click="setAggregate($event,index,index1)">
                                                    <a-menu-item key="COUNT" class="fonz12">{{i18n('list.count','计数')}}(COUNT)</a-menu-item>
                                                    <a-menu-item key="COUNTD" class="fonz12">{{i18n('list.deCount','去重计数')}}(COUNTD)</a-menu-item>
                                                    <a-menu-item key="SUM" class="fonz12">{{i18n('list.sum','求和')}}(SUM)</a-menu-item>
                                                    <a-menu-item key="AVG" class="fonz12">{{i18n('list.average','均值')}}(AVG)</a-menu-item>
                                                    <a-menu-item key="MAX" class="fonz12">{{i18n('list.maxValue','最大值')}}(MAX)</a-menu-item>
                                                    <a-menu-item key="MIN" class="fonz12">{{i18n('list.minValue','最小值')}}(MIN)</a-menu-item>
                                                </a-sub-menu>
                                                <a-menu-item key="hideField">
                                                    <span v-if="field.hide" @click="hideField(index,index1,'measure',false)" class="fonz12">{{i18n('list.unhide','取消隐藏')}}</span>
                                                    <span v-else @click="hideField(index,index1,'measure',true)" class="fonz12">{{i18n('list.hideField','隐藏字段')}}</span>
                                                </a-menu-item>
                                            </a-menu>
                                        </a-dropdown>
                                    </div>
                                </div>
                            </a-collapse-panel>
                        </a-collapse>
                    </div>
                    <div>
                        <a-collapse  :bordered="false" default-active-key="1"  v-for="(param,index) in params">
                            <template #expandIcon="props">
                                <a-icon type="caret-right" :rotate="props.isActive ? 90 : 0" />
                            </template>
                            <a-collapse-panel key="1" :header="param.tableName">
                                <div style="margin-top: -10px">
                                    <div class="model_obj" v-for="(field,index1) in param.fields" :key="field.fieldName">
                                        <i @mouseenter="mouseenter(index,index1,'param')" :class="['iconfont '+field.icon]" style="color:#9babed;margin-right: 6px"></i><span style="font-size: 12px;" @mouseenter="mouseenter(index,index1,'param')">{{ field.fieldLabel }}</span>
                                        <a-dropdown :trigger="['click']" v-show="paramsParentId==index && paramsId==index1">
                                            <i class="iconfont iconzhuanhuan icon_ringht" ></i>
                                            <a-menu slot="overlay" :selectedKeys="selectedKeys(field.comparison)" class="fonz12" v-show="paramsParentId==index && paramsId==index1">
                                                <a-sub-menu key="comparison" class="fonz12" :title="i18n('list.assoMethod','关联方式') + '('+field.comparison+')'" @click="setComparison($event,index,index1)">
                                                    <template v-if="field.dataType==='date'">
                                                        <a-menu-item :key="item.value" class="fonz12" v-for="item in dateComparisonList" >
                                                            {{item.label}}
                                                        </a-menu-item>
                                                    </template>
                                                    <template v-else>
                                                        <a-menu-item :key="item.value" class="fonz12" v-for="item in comparisonList" >
                                                            {{item.label}}
                                                        </a-menu-item>
                                                    </template>
                                                </a-sub-menu>
                                                <a-menu-item key="delParams">
                                                    <span @click="delParams(index,index1)" class="fonz12">{{$ti18('rxList.delBtn','删除')}}</span>
                                                </a-menu-item>
                                            </a-menu>
                                        </a-dropdown>
                                    </div>
                                </div>
                            </a-collapse-panel>
                        </a-collapse>
                    </div>
                </div>
            </div>
        </div>

        <a-modal v-if="relatedPartys.length>0" v-model="visible" :title="i18n('list.tableAsso','表关联')" @ok="modalOk" @cancel="modalCancel" :zIndex="99999" :width="570" >
            <div class="association">
                <div style="overflow:hidden;">
                    <div style="float: left">
                        <!--关联方-->
                        <a-select style="width: 150px" :placeholder="i18n('list.relateParty','关联方')" @change="handleChange"  :options="relatedPartys" v-model="relatedKey" :default-value="relatedPartys[0].key"
                                  :getPopupContainer="(p)=>p.parentNode" />
                        <!--关联方式-->
                        <a-select style="margin-left: 20px; width: 150px" @change="joinChange" :placeholder="i18n('list.assoMethod','关联方式')" default-value="left" v-model="curJoin"
                                  :getPopupContainer="(p)=>p.parentNode">
                            <a-select-option value="left">{{i18n('leftConnect','左连接')}}</a-select-option>
                            <a-select-option value="inner">{{i18n('inConnect','内连接')}}</a-select-option>
                            <a-select-option value="full">{{i18n('fullConnect','全连接')}}</a-select-option>
                        </a-select>
                    </div>

                    <!--当前方-->
                    <div class="current" >{{ moveKey }}</div>
                </div>

                <!-- 关联条件-->
                <div>
                    <!--展示关系-->
                    <div class="exhibition"><span>{{i18n('list.assoRelate','关联关系')}}</span></div>
                    <div v-for="(on,index) in curJoinOn" style="margin-bottom: 20px">
                        <a-select style="width: 224px" :placeholder="i18n('list.relateParty','关联方')" v-model="on.leftField" @dropdownVisibleChange="selectFields('related')"
                                  :getPopupContainer="p=>p.parentNode" allowClear >
                            <a-select-option  :key="field.fieldName" v-for="field in relatedFields">{{field.fieldLabel}}</a-select-option>
                        </a-select>
                        <span style="margin-left: 17px;margin-right: 17px;">=</span>
                        <a-select style="width: 224px" :placeholder="i18n('list.currentParty','当前方')" @dropdownVisibleChange="selectFields()"
                                  v-model="on.rightField"
                                  :getPopupContainer="(p)=>p.parentNode" allowClear >
                            <a-select-option  :key="field.fieldName" v-for="field in curFields">{{field.fieldLabel}}</a-select-option>
                        </a-select>
                        <!-- 删除按钮-->
                        <i class="iconfont icondelete deleteAtto" @click="delJoinOn(index)"></i>
                    </div>
                    <!-- 添加按钮图标-->
                    <div class="addTo"><i class="iconfont iconjia" @click="addJoinOn"></i></div>
                </div>
            </div>
        </a-modal>
        <a-modal  v-model="showSyncTable"
                  :title="i18n('list.syncTable','同步表结构')"
                  @ok="syncTable()"
                  @cancel="showSyncTable=false"
                  :zIndex="99999"
                  :width="570">
            <p> {{i18n('syncAll','同步表结构会同步所有表新增或删除的字段！')}}</p>
            <p>{{i18n('notSync','所有表字段类型变更不会被同步，原有数据集关联模型不受影响。')}}</p>
            <p>{{i18n('sureSync','确定同步吗？')}}</p>
        </a-modal>
    </rx-dialog>
</template>
<script>
import ChartDataModelApi from '@/api/form/core/chartDataModel'
import {RxDialog, RxInputButton, Dialog, Util, RxMonacoEditor, BaseFormModel,JsConstant} from "@lowcode/jpaas-common-lib";
import ChartDataConfigure from './ChartDataConfigure'
import draggable from 'vuedraggable'
import AppName from "@/assets/js/AppName.js";



export default {
    name: 'ChartDataModelDesign',
    mixins: [BaseFormModel,AppName],
    components: {
        RxDialog,
        RxInputButton,
        RxMonacoEditor,
        draggable,
        ChartDataConfigure
    },
    props: {
        layerid: {
            type: String,
            default: ""
        },
        destroy: {
            type: Function
        },
        dataMode: {
            type: Object
        }
    },
    data() {
        return {
            //所有的表
            allTables: [],
            //选择的表
            tables: [],
            //拖拽前的表配置
            oldTables: [],
            //数据源
            ds: "",
            //查询的表
            searchTables: [],
            search: "",
            //维度
            dimensions: [],
            //度量
            measures: [],
            dimensionEdit: null,
            //维度的父级子级的id
            parentid: '',
            childrenid: '',
            //度量的父级子级的id
            MRparentid: '',
            MRchildrenid: '',
            ////参数的父级子级的Id
            paramsParentId: '',
            paramsId: '',

            measureEdit: null,
            moveKey: "",
            visible: false,
            //关联方
            relatedPartys: [],
            //关联方字段
            relatedFields: [],
            //当前方字段
            curFields: [],
            //当前方关联条件
            curJoinOn: [],
            //测试数据
            testlist: {},
            //选中删除key
            deleteId: [],
            deleteParent: '',
            //参数
            params: [],
            relatedKey: '',
            curJoin: '',
            //标记是点击出的弹窗
            openFalg: false,
            dataModeType: "table",
            sqlAlias: "",
            sql: null,
            //sql类型
            sqlType: "sql",

            rules: {
                name: [{required: true, message: this.i18n('form.modelName', '模型名称', 'input'), trigger: 'change'}],
                dataSource: [{
                    required: false,
                    message: this.i18n('form.dataSource', '数据源', 'select'),
                    trigger: 'change'
                }],
                categoryId: [{required: true, message: this.i18n('form.classify', '分类', 'select'), trigger: 'change'}]
            },
            defFields: [
                {fieldName: 'ID_', comment: "主键", dataType: 'varchar'},
                {fieldName: 'TENANT_ID_', comment: '机构ID', dataType: 'varchar'},
                {fieldName: 'CREATE_BY_', comment: '创建人ID', dataType: 'varchar'},
                {fieldName: 'UPDATE_BY_', comment: '更新人ID', dataType: 'varchar'},
                {fieldName: 'CREATE_TIME_', comment: '创建时间', dataType: 'datetime'},
                {fieldName: 'UPDATE_TIME_', comment: '更新时间', dataType: 'datetime'},
                {fieldName: 'CREATE_DEP_ID_', comment: '创建部门ID', dataType: 'varchar'},
                {fieldName: 'CREATE_DEP_ID_', comment: '创建部门ID', dataType: 'varchar'},
                {fieldName: 'REF_ID_', comment: '外键', dataType: 'varchar'},
                {fieldName: 'PARENT_ID_', comment: '父ID', dataType: 'varchar'},
                {fieldName: 'UPDATE_VERSION_', comment: '版本号', dataType: 'varchar'},
                {fieldName: 'CREATE_BY_NAME', comment: '创建人名称', dataType: 'varchar'},
                {fieldName: 'UPDATE_BY_NAME', comment: '更新人名称', dataType: 'varchar'},
                {fieldName: 'COMPANY_ID_', comment: '公司ID', dataType: 'varchar'},
                {fieldName: 'INST_ID_', comment: '流程实例ID', dataType: 'varchar'},
                {fieldName: 'INST_STATUS_', comment: '流程实例状态', dataType: 'varchar'},
                {fieldName: 'DELETED_', comment: '逻辑删除', dataType: 'varchar'},
                {fieldName: 'USER_INFO_', comment: '用户信息', dataType: 'varchar'},
            ],
            //同步表结构确认框
            showSyncTable: false,
            dateComparisonList: [
                {value: 'EQ', label: this.i18n('list.equal', '等于')},
                {value: 'NEQ', label: this.i18n('list.notEqual', '不等于')},
                {value: 'LESS', label: this.i18n('list.lt', '小于')},
                {value: 'LESS_EQUAL', label: this.i18n('list.le', '小于等于')},
                {value: 'GREAT', label: this.i18n('list.gt', '大于')},
                {value: 'GREAT_EQUAL', label: this.i18n('list.ge', '大于等于')},
                {value: 'BETWEEN', label: this.i18n('list.between', '之间')},
            ],
            comparisonList: [
                {value: 'EQ', label: this.i18n('list.equal', '等于')},
                {value: 'NEQ', label: this.i18n('list.notEqual', '不等于')},
                {value: 'IN', label: this.i18n('list.include', '包含')},
                {value: 'LK', label: this.i18n('list.fuzzyMatch', '模糊匹配')},
                {value: 'LEK', label: this.i18n('list.leftQuery', '左模糊查询')},
                {value: 'RIK', label: this.i18n('list.rightQuery', '右模糊查询')},
            ]
        }
    },
    created() {
        this.isUserManager(this.$route.query.appId);
        this.init();
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "chartDataModel", key);
        },
        parentMouseenter(key){
            this.deleteParent = key
        },
        parentMouseleave(name){
            this.deleteParent = name
        },
        //全部删除表配置
        wholeDelete(){
            this.testlist ={};
            this.tables = [];
            this.dimensions = [];
            this.measures = [];
            this.params = [];
        },
        //格式选中的数据
        selectedKeys(name) {
            if (name != undefined) {
                var obj = [];
                obj.push(name);
                return obj
            }
        },
        getTables(dsAlias){
            ChartDataModelApi.getTables("tableName=&ds=" + dsAlias).then(res => {
                if (res.length > 0) {
                    this.allTables = res;
                }
            });
        },
        init() {
            this.mdl=this.dataMode
            //根据数据源获取表
            if (this.dataMode && this.dataMode.dataSource) {
                var dataSource = JSON.parse(this.dataMode.dataSource);
                if (dataSource.value) {
                    this.searchTables = [];
                    this.ds = dataSource.value;
                    this.getTables(this.ds);
                }
            }else {
                this.getTables("");
            }
            //数据模型配置
            if (this.dataMode && this.dataMode.modelConfig) {
                var modelConfig = JSON.parse(this.dataMode.modelConfig);
                this.dimensions = modelConfig.dimensions;
                this.iconfont(this.dimensions);
                this.measures = modelConfig.measures;
                this.iconfont(this.measures);
                this.params = modelConfig.params;
            }
            if (this.dataMode && this.dataMode.tables){
                this.tables = JSON.parse(this.dataMode.tables);
                this.relatedPartys = JSON.parse(this.dataMode.tables);
            }
            //默认表配置
            if (!this.dataMode.type){
                this.dataMode.type="table";
            }
            this.dataModeType=this.dataMode.type;
            if(this.dataModeType=='sql'){
                if(this.dataMode.sqlMode){
                    var sqlMode= JSON.parse(this.dataMode.sqlMode);
                    this.sqlAlias=sqlMode.sqlAlias;
                    this.sql=sqlMode.sql;
                    this.sqlType=sqlMode.sqlType || "sql";
                }
            }
            this.restructure();
            //点击同步按钮初始化关闭对话框
            this.showSyncTable=false;
        },
        //添加图标
        iconfont(obj){
            for(var icon of obj){
                if(icon.dataType =='string'){
                    icon.icon='iconField-String';
                }else if( icon.dataType =='date'){
                    icon.icon='iconriqi';
                }else if( icon.dataType =='number'){
                    icon.icon='iconshuzi';
                }
            }
        },
        //选择数据源
        openDataSource(vm) {
            Dialog.openDataSourceDialog({
                curVm: this, widthHeight: ['1200px', '600px'],
                data: {appName: this.serviceName}
            }, function (self, data) {
                var jsonObj={text:data.name,value:data.alias};
                self.$set(self.dataMode,"dataSource",JSON.stringify(jsonObj));
                vm.setVal(data.alias, data.name);
                self.init();
            })
        },
        cancel() {
            Util.closeWindow(this, 'cancel');
        },
        save(value) {
            var modelConfig = {
                "dimensions": this.dimensions,
                "measures": this.measures,
                "params":this.params
            }
            //sql模式
            if(this.dataModeType=='sql'){
                if(this.sqlAlias){
                    value.sqlMode=JSON.stringify({
                        sqlAlias:this.sqlAlias,
                        sql:this.sql,
                        sqlType:this.sqlType
                    })
                    for (var i = 0; i <modelConfig.dimensions.length ; i++) {
                        modelConfig.dimensions[i].tableName=this.sqlAlias;
                    }
                    for (var i = 0; i <modelConfig.measures.length ; i++) {
                        modelConfig.measures[i].tableName=this.sqlAlias;
                    }
                    value.modelConfig = JSON.stringify(modelConfig);
                }else {
                    value.sqlMode="";
                    value.modelConfig = "";
                }
            }else {
                value.modelConfig = JSON.stringify(modelConfig);
                value.tables = JSON.stringify(this.tables);
            }
            ChartDataModelApi.save(value).then(res => {
                Util.closeWindow(this, 'ok');
            });
        },
        /**
         * 获取维度与度量
         * isSync 是否为同步
         **/
        getFields(alias,sql,isSync) {
            if( this.dataModeType=='table'){
                sql = "SELECT * FROM " + alias;
            }
            ChartDataModelApi.getFields({sql: sql, ds: this.ds,sqlType:this.sqlType}).then(res => {
                if(isSync){
                    this.syncFields(alias,res);
                    return;
                }
                var dimensions=[];
                var measures=[];
                if(this.dataModeType=='sql'){
                    this.dimensions=[];
                    this.measures=[];
                }
                for (let i = 0; i < res.length; i++) {
                    var dataType=res[i].dataType;
                    var obj={
                        dataType:res[i].dataType,
                        fieldLabel:res[i].fieldLabel,
                        fieldName:res[i].fieldName
                    };
                    //是否为标准字段
                    let defField = this.defFields.find(item => {
                        if (obj.fieldName == item.fieldName) {
                            return true;
                        }
                    })
                    if (defField) {
                        obj["hide"] = true
                    }
                    if( res[i].dataType =='string'){
                        obj.icon='iconField-String';
                    }else if( res[i].dataType =='date'){
                        obj.icon='iconriqi';
                    }else if( res[i].dataType =='number'){
                        obj.icon='iconshuzi';
                    }
                    //度量
                    if(dataType=="number"){
                        obj["aggregate"]="SUM";
                        measures.push(obj);
                    }
                    //维度
                    else {
                        //默认日期格式
                        if (obj.dataType == 'date') {
                            obj["dataFormat"] = "YYYY-MM-DD";
                        }
                        dimensions.push(obj);
                    }
                }

                var oldAry=[];
                var index=-1;
                //合并维度
                for (let i = 0; i < this.dimensions.length; i++) {
                    if(Object.keys(this.dimensions[i])==alias){
                        oldAry=Object.values(this.dimensions[i]);
                        index=i;
                    }
                }
                dimensions = this.packedArray(oldAry, dimensions);
                var dimension={
                    tableName:alias,
                    fields:dimensions
                }
                if(index!=-1){
                    this.dimensions[index]=dimension;
                    index=-1;
                }else {
                    this.dimensions.push(dimension);
                }

                //合并度量
                for (let i = 0; i < this.measures.length; i++) {
                    if(Object.keys(this.measures[i])==alias){
                        oldAry=Object.values(this.measures[i]);
                        index=i;
                    }
                }
                measures = this.packedArray(this.measures, measures);
                var measure={
                    tableName:alias,
                    fields:measures
                }
                if(index!=-1){
                    this.measures[index]=measure;
                    index=-1;
                }else {
                    this.measures.push(measure);
                }
            })
        },
        //合并数组  oldAry:原来的数组 newAry:新的数组
        packedArray(oldAry, newAry) {
            //原数组为空
            if (!oldAry || oldAry.length == 0) {
                return newAry;
            }
            //合并后的数据
            var array = [];
            for (let i = 0; i < newAry.length; i++) {
                var flag = true;
                for (let j = 0; j < oldAry.length; j++) {
                    //fieldName相同 则取原来的
                    if (newAry[i].fieldName == oldAry[j].fieldName) {
                        array.push(oldAry[j]);
                        flag = false;
                        break;
                    }
                }
                //未找到fieldName相同时 则取新的
                if (flag) {
                    array.push(newAry[i]);
                }
            }
            return array;
        },
        //模糊查询
        fuzzySearch() {
            var arr = [];
            var reg = new RegExp(this.search.toUpperCase());
            for (var i = 0; i < this.allTables.length; i++) {
                var obj = {
                    title: this.allTables[i].tableName,
                    key: this.allTables[i].tableName,
                    join:{}
                }
                if (this.search) {
                    //转大写
                    var tableName = this.allTables[i].tableName.toUpperCase();
                    if (tableName.match(reg)) {
                        arr.push(obj);
                    }
                }
            }
            this.searchTables = arr;
        },
        //切换到目标处 target:目标
        switchTo(index,index1, target) {
            //切换到维度
            if (target == "dimension") {
                var measure = this.measures[index].fields[index1];
                measure["dataFormat"] = "YYYY-MM-DD";
                delete measure.aggregate;
                this.dimensions[index].fields.push(measure);
                this.measures[index].fields.splice(index1, 1);
            }
            //切换到度量
            else if (target == "measure") {
                var dimension = this.dimensions[index].fields[index1];
                dimension["aggregate"] = "SUM";
                delete dimension.dataFormat;
                this.measures[index].fields.push(dimension);
                this.dimensions[index].fields.splice(index1, 1);
            }
        },
        //选择聚合函数
        setAggregate(e, index,index1) {
            this.measures[index].fields[index1]["aggregate"] = e.key;
        },
        //数据模型的鼠标移入移出事件
        mouseenter(index,index1, type) {
            if (type == "dimension") {
                this.parentid = index;
                this.childrenid =index1;
            } else if (type == "measure") {
                this.MRparentid = index;
                this.MRchildrenid = index1;
            }else if (type == "param") {
                this.paramsParentId = index;
                this.paramsId = index1;
            }
        },
        mouseleave(type) {
            if (type == "dimension") {
                this.parentid = null;
                this.childrenid = null;
            } else if (type == "measure") {
                this.MRparentid = null;
                this.MRchildrenid = null;
            }else if (type == "param") {
                this.paramsParentid = null;
                this.paramsId = null;
            }
        },
        //设置数据格式
        setDataFormat(e, index,index1) {
            this.dimensions[index].fields[index1]["dataFormat"] = e.key;
        },
        //拖拽结束事件
        onEnd(e) {
            var self=this;
            var  items=this.tables.filter(function(m){
                return  m.key==self.moveKey;
            })
            if(items.length<2 && items.length>0 ) {
                //两张表后需要配置两张表的关联条件
                if(this.tables.length>1){
                    //去除当前方
                    this.relatedPartys.splice(e.newDraggableIndex, 1);
                    this.visible=true;
                    //默认第一个
                    this.tables[e.newDraggableIndex].join.tableName=this.relatedPartys[0].key;
                    this.relatedKey=this.relatedPartys[0].key;
                    this.tables[e.newDraggableIndex].join.type="left";
                    this.curJoin="left";
                    this.curJoinOn=this.tables[e.newDraggableIndex].join.on;
                    if(!this.curJoinOn ||this.curJoinOn.length==0){
                        this.curJoinOn=[];
                        this.curJoinOn.push({
                            leftField:"",
                            rightField:""
                        })
                    }
                    //将当前的数据放到最后
                    this.oldTables.push(this.tables[e.newDraggableIndex]);
                    this.tables=this.oldTables;
                }else if(this.tables.length ==1){
                    this.restructure();
                }
                return ;
            }else {
                this.tables.splice(e.newDraggableIndex, 1);
            }

        },
        //禁止表配置能够拖拽
        onMove() {
            return false;
        },
        //拖到表配置中
        tableMove(e, originalEvent) {
            this.moveKey=e.draggedContext.element.key;
            return true;
        },
        //表配置新增时触发
        addTable(){
            var self=this;
            if(this.moveKey){
                var  items=this.tables.filter(function(m){
                    return  m.key==self.moveKey;
                })
                if(items.length<2) {
                    this.getFields(this.moveKey);
                }
            }
        },
        //modal确认
        modalOk(){
            if(this.curJoinOn[0].leftField=='' || this.curJoinOn[0].rightField==''){
                this.$notification.open({
                    message: this.i18n('list.assoRelate','关联关系'),
                    description:
                        this.i18n('list.assoRelate','关联关系','select'),
                    onClick: () => {

                    },
                });
                return
            }
            this.visible=false;
            for (let i = 0; i < this.tables.length; i++) {
                if(this.moveKey==this.tables[i].key){
                    this.tables[i].join.on=this.curJoinOn;
                    break;
                }
            }
            this.restructure()
        },
        //modal取消
        modalCancel(){
            //是否为点击出的弹窗
            if(!this.openFalg){
                for (let i = 0; i < this.tables.length; i++) {
                    if(this.moveKey==this.tables[i].key){
                        this.delTable(i);
                        break ;
                    }
                }
            }
            this.openFalg=false;
            this.visible=false;
        },
        //删除表配置
        delTable(index){
            var tableName=this.tables[index].key;
            for (let i = 0; i < this.dimensions.length; i++) {
                if(this.dimensions[i].tableName==tableName){
                    this.dimensions.splice(i,1);
                    break;
                }
            }
            for (let i = 0; i < this.measures.length; i++) {
                if(this.measures[i].tableName==tableName){
                    this.measures.splice(i,1);
                    break;
                }
            }
            this.tables.splice(index,1);
        },
        //关联方变化
        handleChange(value){
            for (let i = 0; i < this.tables.length; i++) {
                if(this.moveKey==this.tables[i].key){
                    this.tables[i].join.tableName=value;
                    this.curJoinOn=[{
                        leftField:"",
                        rightField:""
                    }];
                    this.tables[i].join.on=[];
                }
            }
        },
        //关联方式变化
        joinChange(value){
            for (let i = 0; i < this.tables.length; i++) {
                if(this.moveKey==this.tables[i].key){
                    this.tables[i].join.type=value;
                    return ;
                }
            }
        },
        //点击下拉 获取options
        selectFields(type){
            var tableName="";
            this.relatedFields=[];
            this.curFields=[];
            //关联方
            if(type=="related"){
                tableName=this.tables[0].key;
            }else {
                tableName=this.moveKey;
            }
            for (let i = 0; i < this.dimensions.length; i++) {
                if(this.dimensions[i].tableName==tableName){
                    if(type=="related"){
                        this.relatedFields.push(...this.dimensions[i].fields);
                    }else {
                        this.curFields.push(...this.dimensions[i].fields);
                    }
                }
            }
            for (let i = 0; i < this.measures.length; i++) {
                if(this.measures[i].tableName==tableName){
                    if(type=="related"){
                        this.relatedFields.push(...this.measures[i].fields);
                    }else {
                        this.curFields.push(...this.measures[i].fields);
                    }
                }
            }
        },
        //新增关联条件
        addJoinOn(){
            this.curJoinOn.push({
                leftField:"",
                rightField:""
            })
        },
        //刪除关联条件
        delJoinOn(index){
            this.curJoinOn.splice(index,1);
        },
        //删除表配置数据
        deleteClick(key){
            var deleteSubtable = {};
            for(var i=0;i<this.testlist.children.length;i++){
                if(key ==this.testlist.children[i].key){
                    deleteSubtable = this.testlist.children[i]
                    this.testlist.children.splice(i,1);
                    //拼接deleteId
                    this.deleteTables(deleteSubtable)
                    break;
                }
            }
        },
        //修改表配置数据
        modification(type){
            var that = this;
            that.visible = true;
            that.moveKey =type.key;
            that.relatedKey =type.join.tableName;
            that.curJoin = type.join.type;
            that.curJoinOn = type.join.on;
            that.openFalg=true;
        },
        deleteTables(style){
            //删除
            this.deleteId =[];
            this.deleteId.push(style.key);
            if(style.children && style.children.length>0){
                this.infiniteDelete(style.children)
            }
            //删除tables里面数据
            this.deleteTablesTid();
        },
        infiniteDelete(style){
            for(var i=0;i<style.length;i++){
                this.deleteId.push(style[i].key);
                if(style[i].children && style[i].children.length !=0){
                    this.infiniteDelete(style[i].children)
                }
            }
        },
        deleteTablesTid(){
            for(var key of this.deleteId) {
                for (let j = 0; j < this.dimensions.length; j++) {
                    if(this.dimensions[j].tableName==key){
                        this.dimensions.splice(j,1);
                        break;
                    }
                }
                for (let k = 0; k < this.measures.length; k++) {
                    if(this.measures[k].tableName==key){
                        this.measures.splice(k,1);
                        break;
                    }
                }
                for(var i=0;i< this.tables.length;i++){
                    if(key == this.tables[i].key){
                        this.tables.splice(i,1);
                        break
                    }
                }
            }
        },
        //重构数据
        restructure(){
            var newTables = {};
            for(var i=0;i< this.tables.length;i++){
                if(i ==0){
                    newTables.key=this.tables[i].key;
                    newTables.title=this.tables[i].title;
                    newTables.join=this.tables[i].join;
                }else{
                    if(this.tables[i].join.tableName == newTables.key){
                        if(!newTables.children){
                            newTables.children=[{
                                key:this.tables[i].key,
                                title:this.tables[i].title,
                                join:this.tables[i].join
                            }];
                        }else{
                            newTables.children.push({
                                key:this.tables[i].key,
                                title:this.tables[i].title,
                                join:this.tables[i].join
                            })
                        }
                    }else {
                        var obj={
                            key:this.tables[i].key,
                            title:this.tables[i].title,
                            join:this.tables[i].join
                        }
                        this.infinite(newTables.children,obj);
                    }
                }
            }
            this.testlist=newTables;
        },
        //循环重构
        infinite(children,table){
            for (let i = 0; i <children.length ; i++) {
                if(children[i].key==table.join.tableName){
                    if(!children[i].children){
                        var obj = [];
                        obj.push(table)
                        children[i].children=obj;
                    }else{
                        children[i].children.push(table)
                    }
                    break;
                }else {
                    if(children[i].children){
                        this.infinite(children[i].children,table);
                    }
                }
            }
        },
        addParam(index,index1, type){
            var obj={}
            if (type == "dimension") {
                obj = this.dimensions[index];
            }else if(type == "measure") {
                obj = this.measures[index];
            }
            var field = obj.fields[index1];
            var findParam = this.params.find((item) =>item.tableName== obj.tableName);
            if(findParam){
                var findField =  findParam.fields.find((item) =>item.fieldName== field.fieldName);
                if(!findField){
                    findParam.fields.push({
                        fieldLabel: field.fieldLabel,
                        fieldName: field.fieldName,
                        icon: field.icon,
                        dataType:field.dataType,
                        comparison:"EQ"
                    })
                }
            }else {
                this.params.push({
                    tableName:obj.tableName,
                    fields:[{
                        fieldLabel: field.fieldLabel,
                        fieldName: field.fieldName,
                        icon: field.icon,
                        dataType:field.dataType,
                        comparison:"EQ"
                    }]
                })
            }
        },
        //删除参数
        delParams(index,index1){
            this.params[index].fields.splice(index1, 1);
            if(this.params[index].fields.length==0){
                this.params.splice(index, 1);
            }
        },
        //设置比较方式
        setComparison(e,index,index1){
            this.params[index].fields[index1].comparison = e.key;
        },
        typeChange(e){
            this.dataMode.type=e.target.value;
        },
        //SQL语句变化
        executeSql(){
            let sql=this.sql;
            if(!sql || !sql.trim()){

                let inputSqlTip=this.i18n('form.inputSqlTip','请输入SQL脚本!');
                this.$message.warn(inputSqlTip);
                return;
            }
            this.getFields(this.sqlAlias,this.sql);
        },
        /**
         * 隐藏与取消隐藏
         * @param index 表下标
         * @param index1 字段下标
         * @param type 维度(dimension)/度量(measure)
         * @param value ture/false
         */
        hideField(index,index1,type,value){
            var obj={}
            if (type == "dimension") {
                obj = this.dimensions[index];
            }else if(type == "measure") {
                obj = this.measures[index];
            }
            var field = obj.fields[index1];
            this.$set(field,"hide",value);
        },
        /**
         * 全部取消隐藏
         * @param type 维度(dimension)/度量(measure)
         */
        unhideAll(type){
            var self=this;
            this.$confirm({
                title: this.i18n('sureUnHide','确定要全部取消隐藏吗?'),
                okText: this.$ti18('rxForm.okBtn','确定'),
                cancelText: this.$ti18('rxForm.cancelBtn','取消'),
                zIndex:99999,
                onOk() {
                    var arr=[];
                    if (type == "dimension") {
                        arr = self.dimensions;
                    }else if(type == "measure") {
                        arr = self.measures;
                    }
                    for (let i = 0; i < arr.length; i++) {
                        var obj=arr[i];
                        for (let j = 0; j <obj.fields.length; j++) {
                            var field = obj.fields[j];
                            self.$set(field,"hide",false);
                        }
                    }
                },
                onCancel() {},
            });
        },
        /**
         * 同步表结构
         */
        syncTable(){
            this.showSyncTable=!this.showSyncTable;
            if (!this.showSyncTable){
                //表配置模式
                if(this.mdl.type=="table" && this.tables){
                    for (let i = 0; i < this.tables.length; i++) {
                        this.getFields(this.tables[i].key,"",true);
                    }
                }else if(this.mdl.type=="sql"){
                    this.getFields(this.sqlAlias,this.sql,true);
                }
            }
        },
        /**
         * 同步字段
         * @param tableName
         * @param fields
         */
        syncFields(tableName,fields) {
            //取出字段
            var dimensionsFields = [];
            var measuresFields = [];
            for (let i = 0; i < fields.length; i++) {
                var dataType = fields[i].dataType;
                var obj = {
                    dataType: fields[i].dataType,
                    fieldLabel: fields[i].fieldLabel,
                    fieldName: fields[i].fieldName
                };
                if( fields[i].dataType =='string'){
                    obj.icon='iconField-String';
                }else if( fields[i].dataType =='date'){
                    obj.icon='iconriqi';
                }else if( fields[i].dataType =='number'){
                    obj.icon='iconshuzi';
                }
                //度量
                if (dataType == "number") {
                    obj["aggregate"] = "SUM";
                    measuresFields.push(obj);
                }
                //维度
                else {
                    //默认日期格式
                    if (obj.dataType == 'date') {
                        obj["dataFormat"] = "YYYY-MM-DD";
                    }
                    dimensionsFields.push(obj);
                }
            }
            //判断新增与删除 不修改类型
            //维度
            for (let i = 0; i < this.dimensions.length; i++) {
                if(this.dimensions[i].tableName==tableName){
                    dimensionsFields=dimensionsFields.map(item=>{
                        var fieldObj=this.dimensions[i].fields.find(field=>field.fieldName==item.fieldName);
                        if(fieldObj){
                            item=fieldObj;
                        }
                        return item;
                    })
                    this.dimensions[i].fields=dimensionsFields;
                    break;
                }
            }
            //度量
            for (let i = 0; i < this.measures.length; i++) {
                if (this.measures[i].tableName == tableName) {
                    measuresFields=measuresFields.map(item=>{
                        var fieldObj=this.measures[i].fields.find(field=>field.fieldName==item.fieldName);
                        if(fieldObj){
                            item=fieldObj;
                        }
                        return item;
                    })
                    this.measures[i].fields=measuresFields;
                    break;
                }
            }
            //参数
            for (let i = 0; i < this.params.length; i++) {
                if (this.params[i].tableName == tableName) {
                    var ary=[];
                    this.params[i].fields.map(field=>{
                        var obj=fields.find(item=>{
                            if(item.fieldName==field.fieldName){
                                return item;
                            }
                        });
                        if(obj){
                            ary.push(obj);
                        }
                    });
                    this.params[i].fields=ary;
                    break;
                }
            }
        },
        sqlAliasBlur(sqlAlias){
            //转大写
            this.$set(this,"sqlAlias",sqlAlias.toUpperCase());
        },
        showScriptDialog(){
            let self=this;
            let config={curVm:this};
            Dialog.openScriptDialog(config,function (script){
                self.$refs.groovySql.insertContent(script);
            })
        },
        groovySql(val){
            this.$refs.groovySql.insertContent(val);
        },
        insertSql(val){
            this.$refs.sql.insertContent(val);
        }
    },
    watch:{
        tables:function (val,oldVal){
            this.relatedPartys=[];
            this.relatedPartys.push(...val);
            //去除最后一个
            this.relatedPartys.splice(this.relatedPartys.length-1,1);
            this.oldTables=oldVal;
        },
    }
}
</script>
<style>
.model_decoration{
    text-decoration: line-through;
    color: silver!important;
}
.model_chart{
    display: flex;
}
.neiConfigure{
    padding: 15px;
    overflow: auto;
}
.configureALI{
    display: block;
    width: 150px;
    height: 26px;
    background-color: #e5eaff;
    border-radius: 2px;
    color: #7b91e9;
    line-height: 26px;
    padding: 0px 8px;
    float: left;
    border-left: 3px solid #9babed;
}
.deleteAtto{
    color: #c0c5cc;
    font-size: 20px;
    margin-left: 15px;
    cursor: pointer;
}
.addTo{
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    margin-left: 232px;
    background-color: #f5f7fa;
    border-radius: 15px;
    border: solid 1px #dadde0;
    margin-top: 15px;
    cursor: pointer;
}
.exhibition{
    width: 244px;
    height: 26px;
    border: solid 1px #9babed;
    border-radius: 5px 5px 0px 0px;
    margin-left: 120px;
    margin-top: 20px;
    border-bottom: none;
}
.exhibition>span{
    display: block;
    width: 70px;
    margin: auto;
    background: white;
    margin-top: -10px;
    text-align: center;
    color: #9babed;
}
.association .current{
    margin-left: 20px;
    background-color: #e5eaff;
    border-radius: 2px;
    height: 30px;
    line-height: 30px;
    padding: 0px 7px;
    float: left;
    border-radius: 2px;
    border-left: 3px solid #9babed;
    color: #7b91e9;
}
.association{
    min-height: 400px;
    width: 620px!important;
}
.drag{
    line-height: 30px;
}
.iconform{
    color: #9babed;
    margin-right: 8px;
}

.add .ant-collapse-item{
    border-bottom: none!important;
}
.fonz12{
    font-size: 12px!important;
}
.icon_ringht{
    color: #2e8cff;
    margin-left: 10px;
}
.icon_nextstep{
    position: absolute;
    top: 0px;
    left: 100px;
}
.model_obj{
    margin:0px 0px 10px 20px;
    cursor:pointer;
    position: relative;
}
.model_content{
    display: flex;
    width: 100%;
    height: calc(100% - 296px);
    border-radius: 10px;
}
.model_content >div{
    flex: 1;
    padding-top: 10px;
    height: 100%;
    overflow: auto;
}
.model_content >div:nth-child(1){
    border-right: 1px solid #dadde0;
}
.model_content >div:nth-child(2){
    border-right: 1px solid #dadde0;
}
.model_content .ant-collapse-content > .ant-collapse-content-box{
    padding: 10px 5px 0px 18px!important;
}
.model_content .ant-collapse > .ant-collapse-item > .ant-collapse-header{
    padding:4px 16px 4px 40px!important;
}
.model_content .ant-collapse-header{
    height: 30px!important;
}
.model_content .ant-collapse-borderless{
    background: white!important;
}
.model{
    display: flex;
    width: 100%;
    line-height: 30px;
    color: #808080;
    background-color: #f5f7fa;
    border: solid 1px #dadde0;
    margin-top: 6px;
    font-size: 12px;
}
.model >div:nth-child(1){
    border-right: solid 1px #dadde0;
}
.model >div{
    flex: 1;
    padding-left: 15px;
}
.report{
    display: flex;
    width: 100%;
    height: 100%;
}
.report >div:nth-child(1){
    width: 380px;
    height: 100%;
    overflow: auto;
    padding: 15px;
    border-right: 1px solid #e6e8eb;
}
.report >div:nth-child(2){
    flex: 1;
    padding: 15px 15px 0px 15px;
    overflow: auto;
}

.tables_obj{
    color: #46494d;
    border-left: 2px solid #1890ff;
    line-height: 10px;
    padding-left: 8px;
    display: flex;
    align-items: center;
}
.tables_obj >span{
    padding-right: 10px;
}

.relick a {
    margin-right: 10px;
}

.ChartDataModelDesign .ant-form-item{
    margin-bottom: 10px!important;
}
.ChartDataModelDesign .ant-menu-vertical{
    border-right: none!important;
}
.dragClass{
    background-color: #dafaf8 !important;
}
</style>
